<template>
  <div id="linenearly" style="width: 100%; height: 100%"></div>
</template>

<script setup name="GMVnearly">
import axios from 'axios';
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { countByDrugList } from "../../../api/modules/echart";

const getEcharts = async () => {
  let res = await countByDrugList()
  // console.log(res);
  //   let arr = [
  //   {
  //     name: 'a',
  //     id: 1
  //   },
  //   {
  //     name: 'b',
  //     id: 2
  //   },
  //   {
  //     name: '',
  //     id: 3
  //   },
  //   {
  //     name: 'c',
  //     id: 4
  //   },
  // ];
  // arr = arr.map((item) => {
    
  //     return item.name
    
  // })
  // console.log(arr);
  let drug = res.data.data.map((obj) => {
    return obj.name
  });
    let dtotal = res.data.data.map((obj) => {
    return obj.total
    });
     let dprice = res.data.data.map((obj) => {
    return obj.price
     });
     let dnumber = res.data.data.map((obj) => {
    return obj.number
  });

  console.log(drug);
  var chartDom = document.getElementById('linenearly');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    dataZoom: [
      {
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter'
      },
      {
        id: 'dataZoomY',
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'empty'
      }
    ],
    title: {
      text: '药品',
     
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['销售额',"单价","销售量"]
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: drug,

      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: dtotal,

        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: '单价',
        type: 'bar',
        data: dprice,

        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
        {
        name: '销售量',
        type: 'bar',
        data: dnumber,

        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      }
    ]
  };

  option && myChart.setOption(option);
}
onMounted(() => {
  let data = getData()
  console.log(data);
  setTimeout(() => {
    getEcharts(data)
  }, 1000)
})
const getData = async () => {
  
}
</script>
